<template>
    <el-tabs :type="type" :tab-position="tabPosition">
        <template v-for="(tab, index) in iconsTabs">
            <el-tab-pane :label="tab.theme" :key="index">
                <span slot="label">
                    <font-icon :iconName="tab.icon" :size="tab.size"></font-icon> {{tab.theme}}
                </span>
                <div class="icons-tab">
                    <template v-for="(item, i) in tab.list">
                        <span class="icons-item"
                            :class="{'active': currentIcon && currentIcon.font_class === item.font_class}" 
                            :key="i"
                            @click="iconSelect(item);">
                            <svg-icon v-if="tab.theme == 'svg'" :iconName="item.font_class" :size="40"></svg-icon>
                            <font-icon v-else :iconName="item.font_class" :family="item.family" :prefix="item.prefix" :size="40"></font-icon>
                            <p v-show="showClass">{{item.font_class}}</p>
                        </span>
                    </template>
                </div>
            </el-tab-pane>
        </template>
    </el-tabs>
</template>

<script>
import { ELEMENT_ICON_NAMES, SVG_CION_NAMES } from './icons';
const all = require.context('@/assets/icons/font', true, /iconfont\.json$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
const jsonList = requireAll(all)
let iconfontList = []
jsonList.forEach(v => {
    console.log(v);
    iconfontList = [...iconfontList, ...(v.glyphs).map(e => {
        return {
            ...e, 
            family: v.font_family,
            prefix: v.css_prefix_text
        }
    })]
})

export default {
    name: 'IconCollection',
    props: {
        type: String,
        tabPosition: String,
        showClass: Boolean
    },
    data() {
        return {
            iconsTabs: [
                {
                    theme: 'element-ui',
                    icon: 'elment',
                    size: 18,
                    list: ELEMENT_ICON_NAMES.map(name => {
                        return {icon_theme: 'fontIcon', font_class: name}
                    })
                },
                {
                    theme: 'iconfont',
                    icon: 'aliwangwang',
                    size: 20,
                    list: [...iconfontList].map(name => {
                        return {icon_theme: 'fontIcon', ...name}
                    })
                },
                {
                    theme: 'svg',
                    icon: 'SVG',
                    size: 20,
                    list: SVG_CION_NAMES.map(name => {
                        return {icon_theme: 'svgIcon', font_class: name}
                    })
                }
            ],
            currentIcon: null
        }
    },
    methods: {
        iconSelect(item) {
            this.currentIcon = item;
            this.$emit('icon-change', item)
        }
    },
}
</script>

<style lang="scss" scoped>
@import '~@/assets/styles/theme-color.scss';

.icons-tab{
    display: flex;
    flex-wrap: wrap;
    .icons-item{
        display: inline-block;
        text-align: center;
        color: #909399;
        margin: 0.5rem;
        padding: 1rem 0.5rem;
        border-radius: 4px;
        border: 1px dashed #ffffff;
        transition: 0.3s;
        // width: 8rem;
        cursor: pointer;
        &.active, &:hover{
            color: #409EFF;
            background-color: #ECF5FF;
            border-color: #409EFF;
            transform: scale(1.1);
        }
    }
}
</style>